<template>
    <view class="page-wrapper">
        <view class="header">{{title}}</view>
        <view class="author-time"><span>{{author_name}}</span> <span class="ml30">{{date}}</span></view>
        <view class="content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </view>
</template>

<script>
	import { getHotnewsDetails } from '@/api/index.js'
    export default {
        data() {
            return {
                title: undefined,
                author_name: undefined,
                date: undefined,
                content: ''
            }
        },
        onLoad(option) {
            this.handleGetHotnewsDetails(option.key)
        },
        methods: {
            handleGetHotnewsDetails(key) {
                getHotnewsDetails({key: key}).then(res => {
                	this.title = res.data.title;
                	this.author_name = res.data.author_name;
                	this.date = res.data.date;
                	this.content = this.richTxtFilter(res.data.content);
                })
            },
            richTxtFilter(str) {
            	if (!str) return ''
            	return str.replace(/\<p/gi, '<p class="rich-txt-p" ');
            }
        }
    }
</script>

<style  lang="scss">
    .page-wrapper{
        padding: 20rpx;
        color: #696969;
        .header{
            font-size: 42rpx;
            color: #222;
            line-height: 56rpx;
        }
        .author-time{
            font-size: 24rpx;
            color: #999;
            margin-top: 20rpx;
            .ml30{
                margin-left: 40rpx;
            }
        }
        .content{
            margin-top: 40rpx;
            color: #333;
            font-size: 36rpx;
            ::v-deep .rich-txt-p{
                margin: 30rpx 0; 
                line-height: 28px;
            }
        }
    }
</style>
